// notifications

body.caerp .notifications_list {
	position: absolute;
	right: 0;
	top: 0;
	z-index: $floatingNotifLayer;

	.notification_counter {
		display: flex;
		justify-content: flex-end;

		button.unstyled {
			color: var(--theme-text-color);
			height: 3.5rem;
			margin-right: .25rem;
			overflow: hidden;
			position: relative;
			width: 3.5rem;

			svg {
				fill: var(--theme-text-color);
				height: 2rem;
				width: 2rem;
			}

			&:hover,
			&:focus,
			&:active {
				background: none;
			}

			&:not([disabled]):hover,
			&:not([disabled]):focus,
			&:not([disabled]):active {
				svg {
					fill: var(--form-icon-button-hover-color);
				}
			}
		}

		.bubble {
			background: var(--func-negative-color);
			bottom: .5rem;
			box-shadow: 0 1px 1px var(--static-color);
			color: var(--svg-invert-fill-color);
			height: 1.625em;
			line-height: 1.625rem;
			right: .5rem;
			width: 1.625em;
		}
	}

	ul.notifications {
		list-style-type: none;
		width: 100%;

		>li {
			align-items: center;
			background: var(--screen-trans-background-color);
			border-left: 5px solid var(--func-neutral-color);
			box-shadow: 0 0 1px var(--box-shadow-color), 0 0 5px var(--box-shadow-color);
			display: flex;
			font-size: .875rem;
			justify-content: flex-start;
			margin: 5px;
			position: relative;

			&[class] {
				span.icon {
					svg {
						fill: var(--svg-invert-fill-color);
					}
				}
			}

			&.success,
			&.valid {
				border-left-color: var(--func-positive-color);

				span.icon {
					background: var(--func-positive-color);
				}
			}

			&.error,
			&.invalid {
				border-left-color: var(--func-negative-color);

				span.icon {
					background: var(--func-negative-color);
				}
			}

			&.caution {
				border-left-color: var(--func-caution-color);

				span.icon {
					background: var(--func-caution-color);
				}
			}

			&.neutral,
			&.wait {
				border-left-color: var(--func-neutral-color);

				span.icon {
					background: var(--func-neutral-color);
				}
			}

			.text {
				padding: var(--padding-s) var(--padding-m);

				.btn {
					margin-top: var(--padding-s);
				}
			}

			h4.text {
				font-size: .875rem;
			}

			>div {

				h4.text,
				div.text:first-child {
					padding-right: 5rem;
				}

				&:last-child .text:first-of-type {
					padding-right: 0;
				}
			}

			&[aria-hidden="true"] {
				display: none;
			}
		}

		li.text_more {
			border-left-width: 0;

			>div {
				padding: var(--padding-m);
			}
		}
	}

	>ul.notifications {
		max-height: 100vh;
		overflow-y: auto;
		position: absolute;
		right: 0;
		top: 0;
	}

	span {
		display: inline-block;
	}

	span.icon {
		align-self: stretch;
		flex: 0 0 auto;
		width: 3rem;

		svg {
			fill: var(--svg-fill-color);
			height: 2rem;
			margin: .5rem .375rem;
			width: 2rem;
		}
	}

	button.unstyled {
		height: 2rem;
		position: absolute;
		right: 0;
		top: 0;
		width: 2rem;

		svg {
			fill: var(--svg-fill-color);
			margin: 0;
		}

		&:hover,
		&:focus,
		&:active {
			background: var(--form-input-background-color);
		}

		+button.unstyled {
			right: 2.5rem;
		}
	}
}

body.caerp>.notification:not(:empty)~.notifications_list {
	top: 3rem;
}

@media (min-width: $extrawideWidth ) {
	body.caerp .notifications_list {
		width: 22rem;
	}
}

@media (min-width: $wideWidth ) {
	body.caerp .notifications_list {
		width: 25vw;
	}
}

@media (min-width: $desktopWidth ) {
	body.caerp .notifications_list {
		width: 33vw;
	}
}

@media (max-width: $desktopWidth ) {
	body.caerp .notifications_list {
		width: 50vw;
	}
}

@media (max-width: $mobileWidth ) {
	body.caerp .notifications_list {
		width: calc(100vw - 2.5rem);

		.notification_counter {
			a svg {
				height: 1.5rem;
				margin: .5625rem;
				width: 1.5rem;
			}
		}
	}
}

body.caerp.theme_manage_entity .notifications_list {

	.notification_counter button,
	.notification_counter span {
		svg {
			fill: var(--theme-text-color);
		}
	}
}

@media print {

	// styles used when printing pages
	body.caerp .notifications_list .notification_counter {
		display: none;
	}
}